import styled from 'styled-components';
import React, { CSSProperties, useState } from 'react';

import MarkdownPreview from '@uiw/react-markdown-preview';

export interface MakeRealPreviewProps {
    style?: CSSProperties;
    result?: any;
}

export const MakeRealPreview: React.FC<MakeRealPreviewProps> = (props) => {

    return (
        <Container style={props.style}>
            <MarkdownPreview
                source={props.result}
                style={{ padding: 16, minHeight: '100%' }}
                wrapperElement={{
                    "data-color-mode": "dark"
                }}
                rehypeRewrite={(node, index, parent) => {
                    // if (node.tagName === "a" && parent && /^h(1|2|3|4|5|6)/.test(parent.tagName)) {
                    //     parent.children = parent.children.slice(1)
                    // }
                }}
            />
        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    overflow: auto;
`;